<template>
    <div class="box_cart">
        <div class="img">
            <img src="https://yanxuan-item.nosdn.127.net/8ff3a84124d88468874aa4c60c1dae2e.png?imageView&quality=35&thumbnail=70x70" alt="">
        </div>
        <div class="box_left">
            <div class="text_brief">装点欢乐时光 小花园沙拉啦</div>
            <div class="text_attr">小花园沙拉碗-粉色</div>
            <div class="text_money">
                <div class="money_text">换购价</div>
                <div class="new_money">
                    <span style="font-size:4px">￥</span>
                    <span>13.9</span>
                </div>
                <div class="old_money">
                    <span style="font-size:4px">￥</span>
                    <span>19.9</span>
                </div>
                <div>
                    <img class="img2" src="https://yanxuan.nosdn.127.net/static-union/16660003214b9567.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="box_cart">
        <div class="img">
            <img src="https://yanxuan-item.nosdn.127.net/d2153ec72dae83130199c4033360ad6c.png?imageView&quality=35&thumbnail=70x70" alt="">
        </div>
        <div class="box_left">
            <div class="text_brief">装点欢乐食光 小花园沙拉啦</div>
            <div class="text_attr">小花园沙拉碗-红色</div>
            <div class="text_money">
                <div class="money_text">换购价</div>
                <div class="new_money">
                    <span style="font-size:4px">￥</span>
                    <span>14.5</span>
                </div>
                <div class="old_money">
                    <span style="font-size:4px">￥</span>
                    <span>19.9</span>
                </div>
                <div>
                    <img class="img2" src="https://yanxuan.nosdn.127.net/static-union/16660003214b9567.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="box_cart">
        <div class="img">
            <img src="https://yanxuan-item.nosdn.127.net/92f08c8b406a315018e19269bc87adc7.png?imageView&quality=35&thumbnail=70x70" alt="">
        </div>
        <div class="box_left">
            <div class="text_brief">装点欢乐时光 小花园沙拉啦</div>
            <div class="text_attr">小花园沙拉碗-黄色</div>
            <div class="text_money">
                <div class="money_text">换购价</div>
                <div class="new_money">
                    <span style="font-size:4px">￥</span>
                    <span>13.9</span>
                </div>
                <div class="old_money">
                    <span style="font-size:4px">￥</span>
                    <span>19.9</span>
                </div>
                <div>
                    <img class="img2" src="https://yanxuan.nosdn.127.net/static-union/16660003214b9567.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="box_cart">
        <div class="img">
            <img src="https://yanxuan-item.nosdn.127.net/554ba162fa8712d6d70a5275ea646081.png?imageView&quality=35&thumbnail=70x70" alt="">
        </div>
        <div class="box_left">
            <div class="text_brief">粉糯甘甜,0人工添加,..</div>
            <div class="text_attr">50克*4袋</div>
            <div class="text_money">
                <div class="money_text">换购价</div>
                <div class="new_money">
                    <span style="font-size:4px">￥</span>
                    <span>16.8</span>
                </div>
                <div class="old_money">
                    <span style="font-size:4px">￥</span>
                    <span>21</span>
                </div>
                <div>
                    <img class="img2" src="https://yanxuan.nosdn.127.net/static-union/16660003214b9567.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="box_cart">
        <div class="img">
            <img src="https://yanxuan-item.nosdn.127.net/8189f81baf9a7f468078c52f0dbe0cf9.png?imageView&quality=35&thumbnail=70x70" alt="">
        </div>
        <div class="box_left">
            <div class="text_brief">【加大加厚款】厨房除臭</div>
            <div class="text_attr">【加大加厚款】3包/提</div>
            <div class="text_money">
                <div class="money_text">换购价</div>
                <div class="new_money">
                    <span style="font-size:4px">￥</span>
                    <span>24.9</span>
                </div>
                <div class="old_money">
                    <span style="font-size:4px">￥</span>
                    <span>27.9</span>
                </div>
                <div>
                    <img class="img2" src="https://yanxuan.nosdn.127.net/static-union/16660003214b9567.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="box_e">
    <div class="box_end">
        <span class="end_text">查看全部</span>
        <image
            class="end_image"
            src="https://yanxuan.nosdn.127.net/static-union/16583952462be242.png"
        />
    </div>    
    </div>
    
</template>

<script setup lang="ts">

</script>

<style scoped>
.box_cart{
    display: flex;
    margin-right: 8px;
    height: 80px;
}
.img{
    width: 70px;
    height: 70px;
    background-color: rgb(244, 244, 244);
    border-radius: 10px 0 0 10px;
}
.box_left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgb(250, 250, 250);
    font-size: 12px;
    width: 147px;
    padding-right: 8px;
    border-radius: 0 10px 10px 0;
    height: 70px;
}
.text_brief{
    font-weight: 300;
    line-height: 18px;
    overflow: hidden; /*超出部分隐藏*/
    white-space: nowrap; /*禁止换行*/
    text-overflow: ellipsis; /*省略号*/    
}
.text_attr{
    font-weight: 300;
    line-height: 15px;
    color: rgb(153,153,153);
}
.text_money{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.img2{
    width: 20px;
    height: 20px;
    margin-left: auto;
}
.money_text{
    font-size: 12px;
    font-weight: 300;
    line-height: 18px;
    color: rgb(250,30,50);
}
.new_money{
    font-size: 18px;
    font-weight: 300;
    line-height: 18px;
    color: rgb(250,30,50);
}
.old_money{
    font-size: 10px;
    font-weight: 300;
    line-height: 10px;
    text-decoration: line-through;
    color: rgb(153,153,153);
}
.bx_e{
    height: 70px;
    width: 67px;
}
.box_end{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex: 1;
    width: 100%;
    height: 70px;
    padding: 0 5px;
    background-color: rgb(250, 250, 250);
    border-radius: 10px;
}
.end_text{
    width: 48px;
    font-size: 12px;
    font-weight: 300;
    line-height: 18px;
    color: rgb(250,30,50);
}
.end_image{
    width: 5px;
    height: 9px;
    
}
</style>